<template>
	<view class="wrapForm pzForm ">
		<view class="bgLine"></view>
		<view class="wrapFormBody pL15 pR15 pT15">
			<view class="flex alg-center mB5">
				<u-image :width="90" :height="90" :borderRadius="20" v-if="commentInfo?.homeProfile" :src="xf.getImgUrl(commentInfo?.homeProfile)"></u-image>
				<image v-else class="imgW90" :src="resources.defaultHeader" mode=""></image>
				
				<view class="font16 bold mL10">{{commentInfo.name}}</view>
			</view>
			<u-form :label-width="300" class="xf-wrap-form" ref="dataForm" :rules="rules" :model="formData">
				<u-form-item :label-style="{'font-size':'36rpx'}" :border-bottom="false" :label-position="'top'"
					prop="evaluationScore">
					<view class="flex">
						<text class="font15 pR10">总体</text>
						<view class="pT5">
							<u-rate  :active-color="'#FF9C00'" :inactive-color="'#E7E7E7'" :size="48" :count="5"
								v-model="formData.evaluationScore"></u-rate>
						</view>
						<!-- <text class="font15 mL10">{{textInfo}}</text> -->
					</view>
				</u-form-item>
				<u-form-item :label-style="{'font-size':'12rpx'}" :border-bottom="false" :label-position="'top'"
					prop="">
					<u-checkbox-group class="pfBox" @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange($event,index)" v-model="item.checked" v-for="(item, index) in workTypeLis"
							:key="index" :name="item.value">
							<view class="checkTag mB10" :class="item.checked?'checkedTag':''">{{item.text}}</view>
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item :label-style="{'font-size':'36rpx'}" :border-bottom="false" :label-position="'top'"
					label="填写备注" prop="">
					<u-input :custom-style="{background:'#F8F8F8',borderRadius:'20rpx',padding:'30rpx 30rpx !important'}"
						:placeholderStyle="'margin-left:24rpx;color:#8d8d8d'" class="textPz" type="textarea"
						placeholder="请详细描述您需要补充的内容" v-model="formData.evaluationConent" />
				</u-form-item>
				<u-form-item :label-style="{'font-size':'36rpx'}" :border-bottom="false" :label-position="'top'"
					label="上传图片" prop="evaluationImage">
					<xfUploadImg v-model="formData.evaluationImage" :limit="9" />
				</u-form-item>
				<u-form-item :label-style="{'font-size':'24rpx'}" :border-bottom="false" :label-position="'left'"
					label="" prop="izAnonymous">
					<u-checkbox @change="getIsnm" v-model="formData.izAnonymous" >是否匿名评价</u-checkbox>
				</u-form-item>
			</u-form>
		</view>
		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center" @click="saveMyInfo">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {commentForm,getCommonetLis} from "@/api/userInterface/user.js"
	import {pjFormApi} from "@/api/companyInterface/user.js"
	import {getCommentBody} from "@/api/common.js"
	import define from '@/utils/define'
	export default {
		data() {
			return {
				formData: {
					evaluationConent:'',
					oddjobInfoId:'',
					evaluationScore:0,
					izAnonymous:false,
					evaluationCommonSentences:[],
					evaluationCommonSentencesText:[],
					izAnonymousText:'',
					evaluationImage:''
				},
				jobType:'',
				pjLis:[],
				commentInfo:{},
				textInfo:'',
				workTypeLis: [],
				hopeWorkLis: [],
				rules:{
					evaluationScore: [{
						required: true,
						message: '请选择评分',
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
		},
		onLoad(e) {
			this.formData.oddjobInfoId=e.id;
			this.jobType=e.jobType
			this.getDic(e.id)
			this.getCommentInfo(e.orderId)
		},
		methods: {
			getCommentInfo(id){
				getCommentBody({orderId:id}).then(res=>{
					this.commentInfo=res.result;
				})
			},
			saveMyInfo() {
			
				let data=this.xf.deepClone(this.formData)
				if(data.evaluationImage&&data.evaluationImage.length>0){
					data.evaluationImage=data.evaluationImage.map(obj => obj.url).join(',')
				}
				
				data.evaluationCommonSentences=data.evaluationCommonSentences.join(',')
				data.evaluationCommonSentencesText=data.evaluationCommonSentencesText.join(',')
				data.izAnonymous=data.izAnonymous==true?1:2
				data.izAnonymousText=data.izAnonymous==true?'是':'否'
				if(define.identification=="units"){
					data.quiltEvaluatorId=this.commentInfo.id;
					pjFormApi(data).then(res=>{
						this.xf.onlineUtils.toast('评价成功!',2000)
						setTimeout(()=>{uni.navigateBack()},2000)
					
					}).catch(err=>{
						
					})
				}else if(define.identification=="user"){
					commentForm(data).then(res=>{
						this.xf.onlineUtils.toast('评价成功!',2000)
						setTimeout(()=>{uni.navigateBack()},2000)
						
					}).catch(err=>{
						
					})
				}
			},
			getGradeText(e){
			
				if(e>0){
					this.textInfo=this.pjLis[e-1].text
				}else{
					this.textInfo=''
				}
			},
			checkboxChange(e,i) {
				console.log(e)
				if(e.value==true){
					this.formData.evaluationCommonSentences.push(e.name)
					this.formData.evaluationCommonSentencesText.push(this.workTypeLis[i].text)
				}else{
					this.formData.evaluationCommonSentences.filter(v=>{v!=e.name})
					this.formData.evaluationCommonSentencesText.filter(v=>{v!=this.workTypeLis[i].text})
				}
				console.log(this.formData)
			},
		
			getDic(id){
				getCommonetLis({oddjobInfoId:id }).then(res => {
					console.log(res.result[0].dictItemModelList)
					this.workTypeLis=res.result[0].dictItemModelList[0].son;
				})
				
			},
			checkboxGroupChange(e) {
				// this.formData.evaluationCommonSentences
				// console.log(e)
			}
		}
	}
</script>
<style lang="scss" >
	page {
		height: 100%;
		background-color: #fff;
	}
	
	.checkTag{
		width: 194rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 28rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&.checkedTag{
			color:#3291F8;
			background-color: #EAF4FE;
		}
	}
</style>

<style lang="scss" scoped>
	.wrapForm {
		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}
		padding-bottom: 200rpx;
	}

	.bgLine {
		background-color: #EBF0FF;
		width: 100%;
		height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
</style>